<!--vue模板-->
<template>
    <div>
      <span style="font-size: large">报价记录</span>
      <div class="toolbar" style="margin-top: 20px">
        报价编码：<el-input
          placeholder="请输入"
          clearable
          style="width: 100px; margin-right: 10px"
          v-model="filters.code"
        />
        <el-button type="primary" @click="init" style="margin-left: 20px"
          >查询</el-button
        >
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <div
        class="toolbar"
        style="float: right; margin-right: 50px; background-color: transparent"
      >
        <el-button type="primary" @click="addOrUpdate()">添加</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table :data="tableData">
          <el-table-column
            prop="offercode"
            label="报价编码"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="freightName"
            label="货代名称"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="offerDate"
            label="报价时间"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="deaultOffer"
            label="默认报价"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="offerType"
            label="类型"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.offerType == 1">砍价退单</span>
              <span v-else-if="row.offerType == 2">信息错误退单</span>
              <span v-else-if="row.offerType == 7">更新出运</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            header-align="center"
            align="center"
          />
          <el-table-column label="操作" header-align="center">
            <template #default="{ row }">
              <!-- 字典中的类型
                    1砍价退单--------报价详情
                    2信息错误退单----报价详情、确认订单
                    3更新出运--------报价详情、设为默认、错误退单、砍价退单
  ==============================================================================================================
                    <!操作对应的跳转
  
                   -->
              <span v-if="row.offerType == 1">
                <el-button type="primary" link @click="toOfferDetail()"
                  >报价详情</el-button
                >
              </span>
              <span v-else-if="row.offerType == 2">
                <el-button type="primary" link @click="toOfferDetail()"
                  >报价详情</el-button
                >
                <el-button type="primary" link @click="checkOrder()"
                  >确认订单</el-button
                >
              </span>
              <span v-else-if="row.offerType == 3">
                <el-button type="primary" link @click="toOfferDetail()"
                  >报价详情</el-button
                >
                <el-button type="primary" link @click="checkOrder()()"
                  >确认订单</el-button
                >
                <el-button type="primary" link @click="errorRollBack()"
                  >错误退单</el-button
                >
                <el-button type="primary" link @click="bargainRollBack()"
                  >砍价退单</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>
  
        <!--分页-->
        <div style="height: 60px; line-height: 60px; background-color: #fff">
          <el-pagination
            background
            layout="sizes,total,prev, pager, next,jumper"
            :total="total"
            style="float: right; margin-right: 20px"
            @current-change="chpg"
            @size-change="chsize"
          />
        </div>
      </div>
    </div>
  </template>
  
  <!--vue 组件选项定义-->
  <script setup>
  import { ref, onBeforeMount } from "vue";
  import { queryDict } from "@/api/dict.js";
  import { router } from "@/store/utils";
  //分页参数
  const page = ref(1); //当前页数
  const pageSize = ref(10); //每页记录数
  const total = ref(0); //总记录数
  
  //表格数据
  const tableData = ref([]);
  
  const allStatus = ref([]);
  //模糊查询条件，询价编码,sid暂时固定值，后期通过sessionStorage获取供应商端 登录人员的id
  const filters = ref({
    offerCode: ""
  });
  
  async function init() {
    let data = {
      page: page.value,
      pageSize: pageSize.value,
      offerCode: filters.value.offerCode
    };
    console.log("发送列表查询请求前的参数", data);
  }
  //报价详情
  function toOfferDetail() {}
  //确认订单
  function checkOrder() {}
  //错误退单
  function errorRollBack() {}
  //砍价退单
  function bargainRollBack() {}
  //查询字典表
  async function matchDict(type) {
    let res = await queryDict(type);
    if (res.code == 200) {
      allStatus.value = res.data;
    }
  }
  
  //重置
  function reset() {
    filters.value = {
      code: "",
      status: "",
      sid: "1"
    };
    init();
  }
  
  //改变当前页
  function chpg(pg) {
    page.value = pg;
    init();
  }
  //改变每页记录数
  function chsize(pgsize) {
    pageSize.value = pgsize;
    page.value = 1;
    init();
  }
  
  onBeforeMount(() => {
    init().catch(e => {});
    matchDict("offerType").catch(e => {});
  });
  </script>
  
  <!--vue样式 scoped当前样式只适用于当前组件-->
  <style scoped>
  .toolbar {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    padding-left: 20px;
  }
  </style>
  